<%= render_component_tag :button,
  "x-ref": @name,
  "data-tab": @name,
  class: [
    "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
    {
      "py-2": @theme == :toolbar,
      "py-2 text-base": @theme == :page,
    }
  ],
  "x-bind:class": "{
    'border-lookbook-tabs-border-active': isSelected($el),
    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
    'hidden': visibleTabsCount >= #{@position}
  }",
  "x-on:click.prevent": "selectTab($el)",
  data: {
    disabled: @disabled
  } do %>
  <%= label %>
<% end %>
